<template>
  <section class="job-detail">
    <div class="job-holder">
      <div class="job__title">
        <div class="job__title--holder">
          <div class="job__title--box">
            <h4>我的职位</h4>
            <div class="line"></div>
          </div>
        </div>
      </div>

      <div class="job__content">
        <div class="job-detail__title">
          <h4>{{job.name}}</h4>
          <div class="line"></div>
        </div>

        <div class="requirement-item" v-for="item in job.requirement">
          <div class="title">{{item.key}}</div>
          <ul v-if="item.val.length > 0">
            <li v-for="t in item.val">{{t}}</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    validate(data) {
      return /^[a-zA-Z-]+$/.test(data.params.name)
    },
    asyncData (context) {
      return {
        job: {}
      }
    },
    watch: {
      $route(to, from) {
        this.$nextTick(function () {
          this.getJobDetailByName(to.params.name)
        })
      }
    },

    mounted() {
      let name = this.$route.params.name
      this.getJobDetailByName(name)
    },
    methods: {
      getJobDetailByName(name) {
        if (name == 'ui') {
          this.job = {
            name: '设计师',
            requirement: [
              {
                key: '任职要求',
                val: [
                  '设计师要求1',
                  '设计师要求2',
                  '设计师要求3'
                ]
              },
              {
                key: '岗位职责',
                val: [
                  '设计师职责1',
                  '设计师职责2',
                  '设计师职责3'
                ]
              }
            ]
          }
        } else if (name == 'graphic') {
          this.job = {
            name: '平面设计师',
            requirement: [
              {
                key: '任职要求',
                val: [
                  '平面设计师要求1',
                  '平面设计师要求2',
                  '平面设计师要求3'
                ]
              },
              {
                key: '岗位职责',
                val: [
                  '平面设计师职责1',
                  '平面设计师职责2',
                  '平面设计师职责3'
                ]
              }
            ]
          }
        } else if (name == 'font-end') {
          this.job = {
            name: '前端工程师',
            requirement: [
              {
                key: '任职要求',
                val: [
                  '前端工程师要求1',
                  '前端工程师要求2',
                  '前端工程师要求3'
                ]
              },
              {
                key: '岗位职责',
                val: [
                  '前端工程师职责1',
                  '前端工程师职责2',
                  '前端工程师职责3'
                ]
              }
            ]
          }
        } else if (name == 'android') {
          this.job = {
            name: 'android工程师',
            requirement: [
              {
                key: '任职要求',
                val: [
                  'android工程师要求1',
                  'android工程师要求2',
                  'android工程师要求3'
                ]
              },
              {
                key: '岗位职责',
                val: [
                  'android工程师职责1',
                  'android工程师职责2',
                  'android工程师职责3'
                ]
              }
            ]
          }
        } else if (name == 'ios') {
          this.job = {
            name: 'IOS工程师',
            requirement: [
              {
                key: '任职要求',
                val: [
                  'IOS工程师要求1',
                  'IOS工程师要求2',
                  'IOS工程师要求3'
                ]
              },
              {
                key: '岗位职责',
                val: [
                  'IOS工程师职责1',
                  'IOS工程师职责2',
                  'IOS工程师职责3'
                ]
              }
            ]
          }
        } else if (name == 'manager') {
          this.job = {
            name: '大区经理',
            requirement: [
              {
                key: '任职要求',
                val: [
                  '大区经理要求1',
                  '大区经理要求2',
                  '大区经理要求3'
                ]
              },
              {
                key: '岗位职责',
                val: [
                  '大区经理职责1',
                  '大区经理职责2',
                  '大区经理职责3'
                ]
              }
            ]
          }
        } else if (name == 'driver') {
          this.job = {
            name: '货车司机',
            requirement: [
              {
                key: '任职要求',
                val: [
                  '货车司机要求1',
                  '货车司机要求2',
                  '货车司机要求3'
                ]
              },
              {
                key: '岗位职责',
                val: [
                  '货车司机职责1',
                  '货车司机职责2',
                  '货车司机职责3'
                ]
              }
            ]
          }
        } else if (name == 'sales') {
          this.job = {
            name: '销售内勤',
            requirement: [
              {
                key: '任职要求',
                val: [
                  '销售内勤要求1',
                  '销售内勤要求2',
                  '销售内勤要求3'
                ]
              },
              {
                key: '岗位职责',
                val: [
                  '销售内勤职责1',
                  '销售内勤职责2',
                  '销售内勤职责3'
                ]
              }
            ]
          }
        } else {
          this.job = {};
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .job-detail {
    width: 1200px;
    margin: 0 auto;

    .job-holder {

    }

    .job__title {
      overflow: hidden;
      .job__title--holder {
        float: left;
        position: relative;
        left: 50%;
        clear: both;
        .job__title--box {
          position: relative;
          left: -50%;
          padding: 43px 0;
          h4 {
            font-size: 30px;
            line-height: 30px;
            color: #010101;
            font-weight: normal;
            letter-spacing: 2px;
          }
          .line {
            margin-top: 6px;
            margin-left: 2px;
            width: 64px;
            height: 2px;
            background-color: #FF8A01;
          }
        }
      }
    }

    .job__content {
      padding: 0 10px 94px 10px;
      .job-detail__title {
        h4 {
          font-size: 18px;
          line-height: 18px;
          color: #000000;
          font-weight: 400;
        }
        .line {
          margin-top: 4px;
          margin-left: 1px;
          width: 36px;
          height: 1px;
          background-color: #FF8A01;
        }
      }

      .requirement-item {
        margin-top: 20px;
        .title {
          font-size: 16px;
          color: #000000;
          padding: 10px 0;
        }
        ul {
          font-size: 0;
          li {
            font-size: 14px;
            color: #000000;
            line-height: 21px;
            position: relative;
            padding-left: 16px;
            &:before {
              content: '';
              position: absolute;
              top: 50%;
              left: 0;
              width: 6px;
              height: 6px;
              background: #FF8A01;
              border-radius: 50%;
              margin-top: -3px;
            }
          }
        }
      }
    }
  }
</style>
